import React, { useState, useEffect } from 'react';
import { Row, Card, Button, Typography, Select, message } from 'antd';
import { BaseTable, utils } from '@/components/BaseTable';
import PageEmpty from '@/components/PageEmpty';
import {
  CONSTANT_TAB_KEY6, // 投资版
  CONSTANT_TAB_KEY4, // 能力版
  CONSTANT_TAB_KEY5, // 动态版
} from '../utils/constant';

import { getPromiseOrAbilityData } from '../utils/request';

const { Text } = Typography;

const Page = props => {
  const { yearMonth, setExportExcel } = props;
  const [loading, setLoading] = useState(true);
  const [tableMap, setTableMap] = useState({
    headerRenderer: [],
    columns: [],
    data: [],
  });
  // 获取列表数据
  const getData = async (params, callback) => {
    setLoading(true);
    const res = await getPromiseOrAbilityData(params);
    const { headerRenderer, columns, data } = res;
    setExportExcel(!data.length);
    setTableMap({
      headerRenderer,
      columns,
      data,
    });
    setLoading(false);
    if (callback) callback();
  };
  useEffect(() => {
    // 初始化(或者月份改变)获取数据
    getData({
      versionType: CONSTANT_TAB_KEY6,
      vsVersionType: CONSTANT_TAB_KEY5,
      yearMonth,
    });
  }, [yearMonth]);

  const rowRenderer = ({ rowData, rowIndex, cells, columns }) => {
    const cell = cells[0];
    if (rowData.rowSpan) {
      const style = {
        ...cell.props.style,
        backgroundColor: 'white',
        height: rowData.rowSpan * 36 - 1,
        alignSelf: 'flex-start',
        zIndex: 1,
      };
      cells[0] = React.cloneElement(cell, { style });
    }
    return cells;
  };
  return (
    <>
      {loading ? (
        <PageEmpty emptyTitle="加载中" />
      ) : (
        <>
          <BaseTable
            subtractHeight="135px"
            expandColumnKey="name"
            fixedColumns={tableMap.columns}
            headerHeight={[30, 30]}
            headerRenderer={utils.getHeaderRenderer(tableMap.headerRenderer, 2)}
            treeData={tableMap.data}
            rowRenderer={rowRenderer}
          />
        </>
      )}
    </>
  );
};

export default Page;
